<template>
	<view>
		<cu-custom :bgColor="globalColor" :isBack="true">
			<block slot="content">{{ pageType == 'img' ? '图片' : '视频'}}去水印</block>
		</cu-custom>
		<!-- <view class="padding-sm">
			<view class="flex">
				<view class="flex-sub">
					<button class="file-btn" style="width: 98%;" @click="checkAd(-1)
					">保存到手机相册</button>
				</view>
			</view>
			<view class="flex">
				<view class="flex-sub">
					<button class="file-btn" style="width: 98%;" @click="copyTitle">复制文案</button>
				</view>
			</view>
		</view> -->

		<uni-card>
			<view class="tap-warp">
				<view class="tap-item" :class="tapType == 'video' ? 'active' : ''" @click="tapType='video'">
					<uni-icons type="videocam" size="22" color="#1890FF"></uni-icons>
					<text>视频</text>
				</view>
				<view class="tap-item" :class="tapType == 'img' ? 'active' : ''" @click="tapType='img'">
					<uni-icons type="image" size="18" color="#1890FF"></uni-icons>
					<text>图片</text>
				</view>
				<view class="tap-item" :class="tapType == 'text' ? 'active' : ''" @click="tapType='text'">
					<uni-icons type="list" size="18" color="#1890FF"></uni-icons>
					<text>文案</text>
				</view>
			</view>
			<template v-if="tapType == 'video'">
				<swiper class="swiper-box" @change="changeVideo" :current="videoIndex">
					<swiper-item v-for="(item ,index) in respData.videos" :key="index">
						<view class="swiper-item">
							<video style="width: 100%;height: 200px;" class="video-play" :poster="cover" v-bind:src="item" />
						</view>
					</swiper-item>
				</swiper>
				<view class="swiper-tip">
					<text>滑动切换下一个</text>
					<text>{{videoIndex+1}}/{{respData.videos.length}}</text>
				</view>
				<view class="operate-warp">
					<view class="operate-btn plain" @click="copyVideoLink(videoIndex)">
						<uni-icons type="redo" size="18" color="#1890FF"></uni-icons>
						复制链接
					</view>
					
					<view class="operate-btn primary" @click="checkAd(videoIndex)">
						<uni-icons type="download" size="18" color="#fff"></uni-icons>
						下载视频
					</view>
				</view>
			</template>
			<template v-if="tapType == 'img'">
				<swiper class="swiper-box" @change="changeImg" :current="imgIndex">
					<swiper-item v-for="(item ,index) in respData.pics" :key="index">
						<view class="swiper-item">
							<image :src="item" class="swiper-item-img" mode="heightFix" @click="previewPic(index)" />
						</view>
					</swiper-item>
				</swiper>
				<view class="swiper-tip">
					<text>滑动切换下一个</text>
					<text>{{imgIndex+1}}/{{respData.pics.length}}</text>
				</view>
				<view class="operate-warp">
					<view class="operate-btn plain" @click="copyImgLink(imgIndex)">
						<uni-icons type="redo" size="18" color="#1890FF"></uni-icons>
						复制链接
					</view>

					<view class="operate-btn" @click="checkAd(imgIndex)">
						<uni-icons type="download" size="18" color="#1890FF"></uni-icons>
						下载图{{imgIndex+1}}
					</view>

					<view class="operate-btn" @click="checkAd(-1)">
						<uni-icons type="help" size="18" color="#1890FF"></uni-icons>
						下载全部
					</view>
				</view>
			</template>
			
			<template v-if="tapType == 'text'">
			
				<view class="">
					<view class="desc-warp">
						{{respData.desc}}
					</view>
					<view class="operate-btn plain" @click="copyTitle">
						<uni-icons type="redo" size="18" color="#1890FF"></uni-icons>
						复制文案
					</view>
				</view>
			</template>
			
		</uni-card>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<privacy-popup ref="privacyPopup"></privacy-popup>
		<!-- #endif -->
	</view>
</template>
<script>
	export default {
		components: {

		},
		data() {
			return {
				current: 0,
				productList: [],
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				initAd: false,
				adError: 0,
				rewardedVideoAd: null,
				downloadIndex: -1,
				globalColor: getApp().globalData.globalColor,
				selectImgArr: [],
				pageType: 'img',
				tapType: '',
				items: ['视频1', '图片', '文案'],

				videoIndex: 0,
				imgIndex: 0,
				mode: 'round',
				respData: {}
			}
		},
		onLoad(option) {
			const value = getApp().globalData.pics;

			var data = JSON.parse(value)
			console.log(data)
			if (data.videos === null) data.videos = [];
			this.respData = data
			this.productList = data.videos.length ? data.videos : data.pics;
			this.pageType = data.videos.length ? 'video' : 'img';
			this.tapType = this.pageType
			this.productList.map((item, i) => {
				this.selectImgArr.push(i)
			})
			if (option.initAd) {
				this.initAd = true;
				this.createRewardVideo();
			} else {
				this.adError = 1;
			}
		},
		computed: {
			info() {
				let temp = []
				if (this.tapType == 'video') {
					temp = this.respData.videos
				}
				if (this.tapType == 'img') {
					temp = this.respData.pics
				}
				if (this.tapType == 'text') {
					temp = []
				}
				return temp
			}
		},
		methods: {
			changeVideo(e) {
				console.log(e)
				this.videoIndex = e.detail.current
			},
			changeImg(e) {
				// this.imgIndex = index
				this.imgIndex = e.detail.current
			},
			checkAd(index) {
				this.downloadIndex = index;
				console.log(index)
				if (this.initAd) {
					this.downFile();
				} else {
					if (this.downloadIndex == -1) {
						this.startDownload();
					} else {
						this.newDownLoad(this.downloadIndex)
					}
				}
			},
			downFile() {
				var that = this;
				uni.showLoading({
					title: '初始化资源'
				})
				uni.request({
					url: that.$reqUrl + "/lyz/getUserAdTimes?uid=" + getApp().globalData.uid,
					method: 'get',
					success(res) {
						uni.hideLoading();
						if (res.data.data < getApp().globalData.watchTimes && that.adError != 1) {
							uni.showModal({
								content: getApp().globalData.adTip,
								success(modelRes) {
									if (modelRes.confirm) {
										try {
											that.rewardedVideoAd.show().catch(() => {
												that.rewardedVideoAd.load()
													.then(() => that.rewardedVideoAd.show())
													.catch(err => {
														if (that.downloadIndex == -1) {
															that.startDownload()
														} else {
															that.newDownLoad(that.downloadIndex);
														}
													})
											})
										} catch (e) {
											if (that.downloadIndex == -1) {
												that.startDownload()
											} else {
												that.newDownLoad(that.downloadIndex);
											}
										}
									} else {
										uni.showToast({
											title: '看完广告才能下载，免费软件支持一下'
										})
									}
								}
							})

						} else {
							console.log("------走的是我----")
							if (that.downloadIndex == -1) {
								that.startDownload()
							} else {
								that.newDownLoad(that.downloadIndex);
							}
						}
					},
					fail() {
						uni.hideLoading();
					}
				})
			},
			createRewardVideo() {
				var that = this;
				try {
					this.rewardedVideoAd = wx.createRewardedVideoAd({
						adUnitId: getApp().globalData.videoAdReward
					})
					this.rewardedVideoAd.onError(err => {
						that.adError = 1
					})
					//监听广告是否看完
					that.rewardedVideoAd.onClose(res => {
						if (res && res.isEnded) {
							console.log("===========广告看完了===========")
							uni.request({
								url: that.$reqUrl + "/lyz/updateUserAdTimes?uid=" + getApp().globalData.uid,
								method: 'get',
								success: (res) => {
									console.log(res.data)
								}
							})
							if (that.downloadIndex == -1) {
								that.startDownload()
							} else {
								that.downLoad(that.downloadIndex);
							}
						} else {
							uni.showModal({
								content: getApp().globalData.adTip
							})
						}
					})
				} catch (e) {
					that.adError = 1
					console.log(e)
				}
			},
			copyTitle() {
				uni.setClipboardData({
					data: getApp().globalData.title
				})
			},
			copyImgLink(i) {
				var that = this;
				uni.setClipboardData({
					data: that.respData.pics[i],
					success() {
						uni.setStorageSync(that.respData.pics[i], that.respData.pics[i])
					}
				})
			},
			copyVideoLink(i) {
				var that = this;
				uni.setClipboardData({
					data: that.respData.videos[i],
					success() {
						uni.setStorageSync(that.respData.videos[i], that.respData.videos[i])
					}
				})
			},
			copyPic(i) {
				var that = this;
				uni.setClipboardData({
					data: that.productList[i],
					success() {
						uni.setStorageSync(that.productList[i], that.productList[i])
					}
				})
			},
			previewPic(index) {
				var that = this;
				uni.previewImage({
					urls: [that.productList[index]],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏']
					}
				});
			},
			async startDownload() {
				var that = this;
					var productList = that.tapType == 'video' ? that.respData.videos : that.respData.pics
					console.log(that.tapType)
					console.log(productList)
				for (var i = 0; i < productList.length; i++) {
					var curNum = i + 1;
					uni.showLoading()
					try {
						var playAddr = "";
						await this.getDownloadAddress(productList[i]).then(res => {
							console.log(res) //此处返回值是上面的resolve(res)的数据
							playAddr = res.data.data
						}).catch(err => {
							console.log(err) //此处返回值是上面reject(err);的数据
						})
						console.log('准备下载的图片地址:' + playAddr)
						await this.signleDownload(playAddr)
					} catch (e) {
						console.log(e)
					} finally {
						uni.hideLoading();
					}
				}

			},
			getDownloadAddress(imgUrl) {
				var that = this;
				return new Promise((resolve, reject) => {
					uni.request({
						url: that.$reqUrl + '/lyz/getDownLoadFileUrl',
						method: "POST",
						data: {
							link: imgUrl,
							type: 2,
							source: that.$source
						},
						success: (res) => {
							resolve(res);
						},
						fail: (failRes) => {
							reject(failRes);
						}
					});
				})
			},
			signleDownload(imgUrl) {
				let that = this
				return new Promise((resolve, reject) => {
					const downloadTask = uni.downloadFile({
						url: imgUrl,
						success: (res) => {
							if (res.statusCode === 200) {
								if (that.pageType == 'img') {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath
									});
								} else {
									uni.saveVideoToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											uni.showToast({
												icon: 'success',
												duration: 2000,
												title: '已保存到相册'
											})
										},
									});
								}

							}
							resolve(res);
						},
						fail: (failRes) => {
							reject(failRes);
						}
					});
				})
			},

			downLoad(index) {
				var that = this;
				uni.showLoading({
					title: '正在下载中',
					mask: true
				})
				if (index == -1) {
					for (var i = 0; i < that.productList.length; i++) {
						const downloadTask = uni.downloadFile({
							url: that.productList[i], //仅为示例，并非真实的资源
							success: (res) => {
								if (res.statusCode === 200) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath
									});
								}
							}
						});
						uni.showToast({
							icon: 'none',
							title: '已下载' + (i + 1) + that.pageType == 'img' ? '张图片' : '个视频'
						})
					}

					uni.showToast({
						icon: 'success',
						title: '全部下载完成'
					})
				} else {
					const downloadTask = uni.downloadFile({
						url: that.productList[index], //仅为示例，并非真实的资源
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath
								});
							}
							uni.showToast({
								icon: 'success',
								title: '已保存到相册'
							})
						}
					});
					
				}
			},
			selectImg(index) {
				console.log('12313')
				let temp = this.selectImgArr.indexOf(index)
				if (temp == -1) {
					this.selectImgArr.push(index)
				} else {
					this.selectImgArr.splice(temp, 1)
				}
			},
			newCheckAd(index) {
				this.downloadIndex = index;
				console.log(index)
				if (this.initAd) {
					this.downFile();
				} else {
					if (this.downloadIndex == -1) {
						this.startDownload();
					} else {
						this.downLoad(this.downloadIndex)
					}
				}
			},
			newDownLoad(index) {
				var that = this;
				var productList = that.tapType == 'video' ? that.respData.videos : that.respData.pics
				uni.showLoading({
					title: '正在下载中',
					mask: true
				})
				if (index == -1) {
					for (var i = 0; i < productList.length; i++) {
						const downloadTask = uni.downloadFile({
							url: productList[i], //仅为示例，并非真实的资源
							success: (res) => {
								if (res.statusCode === 200) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath
									});
								}
							}
						});
						uni.showToast({
							icon: 'none',
							title: '已下载' + (i + 1) + that.pageType == 'img' ? '张图片' : '个视频'
						})
					}

					uni.showToast({
						icon: 'success',
						title: '全部下载完成'
					})
				} else {
					const downloadTask = uni.downloadFile({
						url: productList[index], //仅为示例，并非真实的资源
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath
								});
							}
						}
					});
					uni.showToast({
						icon: 'success',
						title: '已保存到相册'
					})
				}
			},

		}

	}
</script>

<style>
	page {
		background: #f7f7f7;
	}

	.container {
		padding-bottom: 100upx;
		color: #333;
	}

	.tui-scale {
		font-weight: bold;
		transform: scale(0.8);
		transform-origin: center 100%;
		line-height: 30upx;
	}

	.tui-item-active {
		color: #e41f19 !important;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}

	.tui-hot-item {
		line-height: 26upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-header-banner {
		padding-top: 100upx;
		box-sizing: border-box;
		background: #e41f19;
		/* #ifdef H5 */
		padding-top: 20upx !important;
		/* #endif */
	}

	.tui-hot-search {
		color: #fff;
		font-size: 24upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20upx;
		box-sizing: border-box;
		position: relative;
		z-index: 2;
	}

	.tui-hot-tag {
		background: rgba(255, 255, 255, 0.15);
		padding: 10upx 24upx;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 24upx;
		/* margin-left: 20upx; */
	}

	.tui-banner-bg {
		display: flex;
		height: 180upx;
		background: #e41f19;
		position: relative;
	}

	.tui-primary-bg {
		width: 50%;
		display: inline-block;
		height: 224upx;
		border: 1px solid transparent;
		position: relative;
		z-index: 1;
		background: #e41f19;
	}

	.tui-route-left {
		transform: skewY(8deg);
	}

	.tui-route-right {
		transform: skewY(-8deg);
	}

	.tui-banner-swiper {
		width: 100%;
		height: 240upx;
		border-radius: 12upx;
		overflow: hidden;
		transform: translateY(0);
	}

	.tui-product-category {
		background: #fff;
		padding: 80upx 20upx 30upx 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 24upx;
		color: #555;
		margin-bottom: 20upx;
	}

	.tui-category-item {
		width: 20%;
		height: 118upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding-top: 30upx;
	}

	.tui-category-img {
		height: 80upx;
		width: 80upx;
		display: block;
	}

	.tui-category-name {
		line-height: 24upx;
	}

	.tui-product-box {
		margin-top: 20upx;
		padding: 0 20upx;
		box-sizing: border-box;
	}

	.tui-pb-20 {
		padding-bottom: 20upx;
	}

	.tui-bg-white {
		background: #fff;
	}

	.tui-group-name {
		font-size: 32upx;
		font-weight: bold;
		text-align: center;
		padding: 24upx 0;
	}


	.tui-new-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.tui-new-item {
		width: 49%;
		height: 200upx;
		padding: 0 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #f5f2f9;
		position: relative;
		border-radius: 12upx;
	}

	.tui-new-mtop {
		margin-top: 2%;
	}

	.tui-title-box {
		font-size: 24upx;
	}

	.tui-new-title {
		line-height: 32upx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}


	.tui-new-original {
		display: inline-block;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12upx;
		transform: scale(0.8);
		transform-origin: center center;
	}

	.tui-new-img {
		width: 160upx;
		height: 160upx;
		display: block;
		flex-shrink: 0;
	}

	.tui-new-label {
		width: 56upx;
		height: 56upx;
		border-top-left-radius: 12upx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding-top: 20upx; */
	}

	.tui-product-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		position: relative;
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12upx;
		overflow: hidden;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20upx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26upx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.file-btn {
		color: #1890FF;
	}

	.check-warp {
		border-radius: 50%;
		overflow: hidden;
		display: inline-block;
		position: absolute;
		top: 8px;
		right: 8px;
		width: 24px;
		height: 24px;

	}

	.check-warp checkbox {
		margin-left: -1px;
		margin-top: -1px;
	}

	.tap-warp {
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: #1890FF;
		margin-bottom: 8px;
	}

	.tap-item {
		font-size: 16px;
		display: flex;
		width: 25%;
		text-align: center;
		justify-content: center;
		padding-bottom: 10px;
		border-bottom: 1px solid transparent;
		/* align-items: center; */
	}

	.tap-item.active {
		border-bottom: 1px solid #1890FF;
	}

	.tap-item text {
		margin-left: 2px;
	}

	.swiper-box {
		height: 200px;
		background-color: #000;
	}

	.swiper-item .swiper-item-img {
		height: 200px !important;
		margin: 0 auto;
	}

	.swiper-tip {
		font-size: 10px;
		padding: 0 4px;
		border-radius: 4px;
		border: 1px solid #ddd;
		margin: 5px 0;
		line-height: 20px;
		display: flex;
		justify-content: space-between;
	}

	.operate-warp {
		margin-top: 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.operate-btn {
		border: 1px solid #1890FF;
		border-radius: 4px;
		padding: 5px 7px 5px 5px;
		display: inline-block;
		color: #1890FF;
	}

	.operate-btn.primary {
		border: 1px solid #1890FF;
		background: #1890FF;
		color: #fff;
	}
	.desc-warp{
		margin: 10px 0;
	}
</style>